<template>
    <div class="talk">
        <button @click="getOne">获取一句土味情话</button>
        <ul>
            <li v-for="talk in talkList" :key="talk.id">
                {{ talk.title }}
            </li>
        </ul>
    </div>
</template>

<script setup lang="ts">
import { nanoid, random } from 'nanoid';
import { reactive } from 'vue';
let talkList=reactive([
    {id:"1",title:"今天"},
    {id:"2",title:"id2"},
    {id:"3",title:"id3"}
])

function getRandomString(length:number) {
  const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
  let result = '';
  
  for (let i = 0; i < length; i++) {
    result += chars.charAt(Math.floor(Math.random() * chars.length));
  }
  
  return result;
}

// 使用示例
// console.log(getRandomString(8));  // 输出类似: "aB3x9KmL"
// console.log(getRandomString(16)); // 输出类似: "pQ7rS2tUvW1yZ3x4"
// 方法
async function getOne() {
    let obj={id:nanoid(),title:getRandomString(10)}
    console.log(obj)
    talkList.unshift(obj)
}
</script>

<style scoped>
.talk{
    background-color: orange;
    padding: 10px;
    border-radius: 10px;
    box-shadow: 0 0 10px;
}
select,button{
    margin: 0, 50px;
    height: 25px;
}
</style>